<template>
    <a-card title="用户留言管理" :bordered="false">





        <a-form-model slot="extra" layout="inline" @submit.prevent="searchSubmit">

            <a-form-model-item>
                <a-input
                        style="width: 150px;" v-model="searchForm.keyword" :allowClear="$store.getters.allowClear" placeholder="关键字"></a-input>
            </a-form-model-item>

            <a-form-model-item>
                <a-input v-model="searchForm.type"
                         :allowClear="$store.getters.allowClear"
                         placeholder="留言类型"></a-input>
            </a-form-model-item>
            <a-form-model-item>
                <a-select placeholder="处理状态" allowClear
                          showSearch :filter-option="$exMod.cxOption"
                          v-model="searchForm.status" style="width: 150px">
                    <a-select-option v-for="(item, index) in MessageStatusOPT" :key="index" :value="item.value">
                        {{item.label }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>

            <span v-show="expansion">

                    <a-form-model-item class="width150">
                        <a-input v-model="searchForm.vipName"
                                 :allowClear="$store.getters.allowClear"
                                 placeholder="会员昵称"></a-input>
                    </a-form-model-item>

                    <a-form-model-item class="width150">
                        <a-input v-model="searchForm.vipPhone" :allowClear="$store.getters.allowClear"
                                 placeholder="会员电话"></a-input>
                    </a-form-model-item>



                    <a-form-model-item>
                        <a-range-picker style="width: 250px;" @change="rangeDateOnChange"/>
                    </a-form-model-item>


                </span>
            <a-form-model-item>
                <a v-if="!expansion" @click="expansion=!expansion">
                    <a-icon type="down"/>
                    展开</a>
                <a v-else @click="expansion=!expansion">
                    <a-icon type="up"/>
                    收起</a>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" html-type="submit">搜索</a-button>
            </a-form-model-item>
            <a-form-model-item>
                <a-button @click="searchRest">重置</a-button>
            </a-form-model-item>

        </a-form-model>

        <!-- 表格开始 -->
        <a-table :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :pagination="pagination"
                 :loading="loading" @change="handleTableChange"
                 bordered>


            <template slot="status" slot-scope="text, record">

                <span :class="'text-'+record.status ">
                {{ $exMod.findDict(MessageStatusOPT, record.status) }}
                    </span>
            </template>

            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <a @click="openEdit(record)">详情</a>
            </template>
        </a-table>

        <detailBox v-if="detailShow" :record="detailRecord" @closeModal="closeEdit"/>

    </a-card>
</template>
<script>
    import {pagination, messageTable} from '../public/colums.js';
    import {messageList} from '../public/http.js';
    import {dictLoad} from "../../../util/internal.api";


    export default {

        components: {
            detailBox: () => import('./detail')
        },

        data() {
            return {
                detailShow: false, //打开编辑器
                detailRecord: {}, //正在编辑的记录

                ArticleShow: false,
                articleHotelId: null,

                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: messageTable, //表头管理
                searchForm: {},
                expansion: true, //搜索更多展开


                MessageStatusOPT: [],


            };
        },
        methods: {

            rangeDateOnChange(date, dateString) {
                this.searchForm.beginDate = dateString[0];
                this.searchForm.endDate = dateString[1];
            },
            searchRest() {
                this.searchForm = {
                    code: '',
                    name: '',
                    description: '',
                }
                this.getTableList()
            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                messageList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.detailRecord = obj;
                this.detailShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.detailShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0 关闭停车问题留言
            finishTask(record) {
                this.loading = true;
                let data = {status: 3}
                taskStop(record.id, data).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                    this.loading = false;
                });
            },
            //数据初始化
            async init() {

                await dictLoad("ArticleMessageStatus").then(res => this.MessageStatusOPT = res);
                this.getTableList();
            },

            openArticleModal(record) {

                this.ArticleShow = true;
                this.articleHotelId = record.id
            }


        },
        created() {
            this.init();
        }
    };
</script>
